var modSample3_locLang=new localLang("modSample3");
var modSample3 = new Class({
	Extends:WFWindow,
	sampleProxyEnable: true,	
    options: {
        name: 'modSample3',
        title: modSample3_locLang.label('title'),
        btnSettings: true,
        btnRefresh: true,
        btnHelp: true,
        btnClose: true,
        loadCSS: true,
		supportServerTypes:['modSimple']      
    },
    settingModalOption:{
        title: modSample3_locLang.label('edit') + ' - '+ modSample3_locLang.label('title'),
        content: '<input type="button" class="cancel" value="'+modSample3_locLang.label('btn_cancel')+'">',
        callBack: function(){
            $$('.modalContent .cancel').addEvent('click',function(e){
                this.refreshMod();
                this.settingModal.close();
            }.bind(this));
        }
    },
    renderContent: function(){
        this.errormsg = new Element('div',{'class':'error'}).inject(this.boxBD);
        this.msg = new WFMessage(this.errormsg);
        var option = {
            type: '0', //0: error, 1: warn, 2: info
            description: 'aaa', //text
            button: 'aaa', //string
            callback: function(){alert('1');}, //callback function
            close: true //true or false      
        };
        var option2 = {
            type: '1', //0: error, 1: warn, 2: info
            description: 'bbb', //text
            button: 'bbb', //string
            callback: function(){alert('2');}, //callback function
            close: true //true or false        
        };
        //this.msg.fireEvent('message',option);
        //this.msg.fireEvent('message',option2);
        //this.addButton('btn_refresh',this.onClickRefresh2.bind(this));
        //this.fillTitle('title');
        // >>>>>>> Highcharts Step 1 : create a div dom element for Highcharts
        this.chartBox = new Element('div', {'class':'container'}).injectInside(this.boxBD);
        this.width = this.chartBox.getSize().x;
        this.height = 300;
        
        
        var data = "module=modSimple&url="+encodeURIComponent(this.widgetPath+'/sampleReporting.php?fakename=fake.json');
		if(this.sampleProxyEnable == true){
		    this.proxyRequest(data,this.displaySuccess.bind(this),this.displayFailure.bind(this));
		} else {
			this.displaySuccess();
        }
    },
	onClickRefresh2: function(){
		var option = {
			title: 'customize button',
			content: '<input type="button" class="cancel" value="'+modSample3_locLang.label('btn_cancel')+'">',
			callBack: function(){
				$$('.modalContent .cancel').addEvent('click',function(e){
					this.customButtonModal.close();
				}.bind(this));
			}.bind(this)
		};
		this.customButtonModal = new WFModal(option);
	},
    displaySuccess: function(response)
	{
    	// >>>>>>> Highcharts Step 2 : assume you get the highcharts json format data via request
        if(this.sampleProxyEnable == false )
		{
            this.chart_data = [{
    			name: 'Year 1800',
    			data: [107, 31, 635, 203, 2]
    		}, {
    			name: 'Year 1900',
    			data: [133, 156, 947, 408, 6]
    		}, {
    			name: 'Year 2008',
    			data: [973, 914, 4054, 732, 34]
    		}];
        }else{
			this.chart_data = JSON.decode(response);
        }
        this.renderChart(this.width, this.height);
        //fire when widget loaded or change height
        window.fireEvent('widget_load', this.widgetInfo);
    },

    displayFailure: function(){
    },
    onContentresize: function(event){
    	if (this.myChart){
    		var xy = this.getContentSize();
    		this.myChart.setSize(xy.x, xy.y-this.errormsg.getSize().y, false);
    	}
    },
    renderChart: function(x, y)
	{	
        if(this.myChart && this.myChart.destroy){
            this.myChart.destroy();
            this.myChart = null;
            if (typeof(CollectGarbage) === 'function'){
                CollectGarbage();
            }
        }

		if(this.chart_data != null)
		{
			// >>>>>>> Highcharts Step 3 : define your chart json,
			// render chart will only create on the first load, 
			// after that any resize behavior will call refreshMod() API
			this.myChart = new Highcharts.Chart({
				
				chart: {
					renderTo: this.chartBox,
					type: 'bar',
					width: x,
					height: y
				},
				title: {
					text : ''
				},
				xAxis: {
					categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
					title: {
						text: null
					}
				},
				yAxis: {
					min: 0,
					title: {
						text: 'Population (millions)',
						align: 'high'
					},
		            labels: {
		                overflow: 'justify'
					}
				},
				tooltip: {
					formatter: function() {
						return ''+
							this.series.name +': '+ this.y +' millions';
					}
				},
				plotOptions: {
					bar: {
						dataLabels: {
							enabled: true
						}
					},
					series: {
						shadow: false,
				        dataLabels: {
		                    enabled: true,
		                    style: {
		                        fontSize:10
		                    },
		                    y: 5
		                }
					}
				},
				series: this.chart_data
		    });
		}
    },
    // >>>>>>> Highcharts Step 4 : please follow below refreshMod implementation
    refreshMod:function()
	{
    	if (typeof(CollectGarbage) === 'function'){
			CollectGarbage();
		}
        if (this.sampleProxyEnable == true){
            var xy = this.getContentSize();
            this.width = xy.x;
            this.height = xy.y-this.errormsg.getSize().y;
            var data = "module=modSimple&url="+encodeURIComponent(this.widgetPath+'/sampleReporting.php?fakename=fake.json');
            this.proxyRequest(data,this.displaySuccess.bind(this),this.displayFailure.bind(this));
        } else {
        	this.onContentresize();
        }
        //need to fire widget_load event if it change widget's height
        //window.fireEvent('widget_load');
    },
    onClickHelp: function(){
        var lang_path = modSample3_locLang.getLang();
        var myRequest = new Request({
            url: this.widgetPath+'/help/'+lang_path+'/help.html',
            method: 'get',
            onSuccess: function(responseText){
                var options = {
                    title: modSample3_locLang.label('help') + ' - ' +  modSample3_locLang.label('title'),
                    content: responseText
                };
                new WFModal(options);
            }
        }).send();
    }
});
